<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="6" style="text-align: center">
        <el-divider> <h2>用户注册</h2></el-divider>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-col :span="18">
        <el-steps  :active="showNum" finish-status="success">
          <el-step title="用户名"></el-step>
          <el-step title="密码"></el-step>
          <el-step title="基本信息"></el-step>
        </el-steps>
      </el-col>
    </el-row>

    <el-row justify="center" type="flex">

        <el-col :span="20" class="myDiv" v-if="showNum === 1" >
          <el-row>
            <el-col>
              &nbsp;
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col style="margin-top: 17vh;font-size:40%" :span="10">
              <el-tooltip class="item" effect="dark" content="有相同的用户名" placement="top-start" v-model="showSameTi" :manual="true">
                <el-input placeholder="请输入用户名"
                          maxlength="10"
                          minlength="4"
                          :show-word-limit="true"
                          v-model="user.username"
                          @input="sameName" />
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row  type="flex" justify="center" style="line-height: 200px">
            <el-col :span="6">
              <el-button style="width: 100%" v-if="!next1Button" @click="next2">下一步</el-button>
            </el-col>
          </el-row>
        </el-col>


<!--        下一步-->
        <el-col :span="20" class="myDiv" v-if="showNum === 2" >
          <el-row>
            <el-col>
              <el-button type="text" @click="showNum=1"><span style="font-size: 18px;margin-left: 12px">上一步</span></el-button>
              <el-divider direction="vertical"></el-divider>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col style="margin-top: 8vh;font-size:40%" :span="10">
              <el-form :rules="rules1" :model="user" ref="user" >
                <el-form-item label="密码" prop="password">
                  <el-input v-model="user.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="再次确认密码" prop="rePassword">
                  <el-input v-model="user.rePassword" type="password"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row  type="flex" justify="center" style="line-height: 200px">
            <el-col :span="6">
              <el-button style="width: 100%" v-if="!next1Button" @click="next3('user')">下一步</el-button>
            </el-col>
          </el-row>
        </el-col>

      <el-col :span="20" class="myDiv" v-if="showNum === 3" >
        <el-row>
          <el-col>
            <el-button type="text" @click="showNum=2"><span style="font-size: 18px;margin-left: 12px">上一步</span></el-button>
            <el-divider direction="vertical"></el-divider>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col style="margin-top: 8vh;font-size:40%" :span="10">
            <el-form :model="user" ref="user2" label-position="top">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model.number="user.phone" />
              </el-form-item>
              <el-form-item label="地址" prop="address">
                <AreaData @change="test" width="100%"></AreaData>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row  type="flex" justify="center" style="line-height: 200px">
          <el-col :span="6">
            <el-button style="width: 100%" v-if="!next1Button" @click="submitUser" type="success">完成</el-button>
          </el-col>
        </el-row>
      </el-col>



      <el-col :span="20" class="myDiv" v-if="showNum === 4" >
        <el-row>
          <el-col>
            &nbsp;
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col style="margin-top: 17vh;font-size:40%" :span="10">
            <el-result icon="success" title="注册成功" subTitle="请根据提示进行操作">
              <template slot="extra">
                <el-button type="primary" size="medium" @click="$router.push({path:'/login'})">返回登录页</el-button>
              </template>
            </el-result>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AreaData from "@/components/AreaData";
import axios from "axios";
import {addUser} from "@/api/user";
export default {
  name: "UserRegister",
  components: {AreaData},
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      next1Button:true,
      userList:[],
      showSameTi:false,
      showNum:0,

      rules1:{
        password:[{required: true, message: '密码不能为空', trigger: 'blur'},{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}],
        rePassword:[ { validator: validatePass2, trigger: 'blur' },{required: true, message: '请再次确认密码', trigger: 'blur'}]
      },

      user:{
        username:'',
        password:'',
        rePassword:'',
        phone:'',
        address:'',
        role:1
      }
    }
  },
  mounted() {
    this.showNum = 1
    axios.get(`http://localhost:3000/user/userList`).then(res=>{
      this.userList = res.data.data
    })
  },
  methods:{
    submitUser() {
      // console.log(this.user)
      addUser(this.user).then(res=>{
        if (res) {
          this.showNum = 4
        }
      })
    },
    next3(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.showNum = 3
        } else {
          return false;
        }
      })
    },
    next2() {
      if (this.user.username === '') {
        this.$message({
          type:'warning',
          message:'用户名不能为空'
        })
      } else {
        this.showNum = 2
      }
    },
    test(e) {
      this.user.address = e
    },
    sameName(e) {
      const a = e===''
      if (a) {
        this.next1Button = true
      }
      let i = 0
      this.userList.forEach(user=>{
        if (user.username === e) {
          this.showSameTi = true
          this.next1Button = true
          i = 1
        }
      })
      if (i===0) {
        this.showSameTi = false
        this.next1Button = false
      }
    }
  }
}
</script>

<style scoped>
.myDiv{
  height: 72vh;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transform: translateZ(0);
}
.el-divider__text {
  background: rgba(0, 0, 0, 0);
}
</style>
